<template>
  <div class="content-container">
  	<m-Head></m-Head>
    <div class="thd-map">
      <mapComponent :id="mapId"></mapComponent>
      <div class="map-control">
        <div><img :src="compassPng" style="width:2.2rem;height:2.2rem;display: block;
    margin-left: 0;"></img></div>
        <div class="eqCenter"><button class="eq-center" v-on:click="encgmap.panToCenter()"></button></div> 
      </div>
    </div>
    <div class="thd-near">
      <div class="thd-near-group" v-if="pagedata && pagedata.near">
        <div class="thd-near-item" v-for="item, index in pagedata.near" :key="index">
          <div class="thd-near-title">
            <div class="thd-near-name">
              <p>{{item.name}}</p>
            </div>
            <div class="thd-near-distance">
              <p>{{item.distence}}</p>
            </div>
          </div>
          <div class="thd-near-content">
            <div class="thd-near-control">
              <p class="thd-near-label">面积(km²)</p>
              <p class="thd-near-int">{{item.area}}</p>
            </div>
            <div class="thd-near-control">
              <p class="thd-near-label">经济(亿元)</p>
              <p class="thd-near-int">{{item.GDP}}</p>
            </div>
            <div class="thd-near-control">
              <p class="thd-near-label">人口(万人)</p>
              <p class="thd-near-int">{{item.POP_ALL}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="thd-his auto-center" v-if="pagedata && pagedata.his">
      <div class="thd-his-title">
        <h3>历史地震</h3>
      </div>
      <div class="thd-his-group">
        <div class="thd-his-item" v-for="item, index in pagedata.his">
          <div class="thd-his-date">
            <p>{{item.EarthquakeDate}}</p>
          </div>
          <div class="thd-his-content">
            <div class="thd-his-addr">
              <div class="thd-his-icon">
                <img :src="item.icon">
              </div>
              <div class="thd-his-name">
                <p>{{item.Macro_epicenter +  item.Magnitude + '地震'}}</p>
              </div>
            </div>
            <div class="thd-his-detail">
              <div class="thd-his-control">
                <p class="thd-his-label">死亡人数(人)</p>
                <p class="thd-his-int">{{item.Death}}</p>
              </div>
              <div class="thd-his-control">
                <p class="thd-his-label">受灾面积(km²)</p>
                <p class="thd-his-int">{{item.Area}}</p>
              </div>
              <div class="thd-his-control">
                <p class="thd-his-label">经济损失(万元)</p>
                <p class="thd-his-int">{{item.DirectEconomicLoss}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mHead from '@/components/head'
import hiso from '@/assets/imgicon/tdhis1.png'
import hiss from '@/assets/imgicon/tdhis2.png'
import hist from '@/assets/imgicon/tdhis3.png'
import axios from '@/assets/api/axios'
import Googlemap from '@/assets/api/gmap'
import chart from '@/assets/api/chart'
import compassPng from '@/assets/mapimg/compassicon.png'
import mapComponent from '@/components/map'
import '@/assets/basemap.css'
export default {
  name: 'thd',
  data: function () {
  	return {
  		//由于vueg的嵌套路由默认不启动转场动画，需要在其匹配组件中设置为启用
  		vuegConfig:{
  			disable:false
  		},
      hisiconarr: [hiso, hiss, hist],
      pagedata: null,
      eqCenter:null,
      mapData:{},
      encgmap:null,
      compassPng:compassPng,
      mapId:"thdmap"
  	}
  },
  created: function () {
    this.getThdData();  
  },
  mounted () {
   
  },
  methods: {
    getThdData () {
      //震中信息
      let setting = {
        method: 'POST',
        url: '/Earthdata/getData'
      };
      let data={
        handel:'epic'
      } 
      axios((res) => {
        if (res.stutas === 200) {
          let data = res.data;
          if(data[0]){
            let time=data[0].time
            this.eqCenter=data[0]
            this.eqCenter.time=time.substring(0,time.length-3);
          }else{
            console.log("请求不到数据")
          }
        }
      }, {setting, data}).then(function(){
        data = {
          handel: 'td'
        };
        axios((res) => {
          if (res.stutas === 200) {
            let data = res.data;
            this.mapData=this.cloneObj(data);
            let hisEqData = this.mapData.hisEqData;
            for(var item in hisEqData){
              if(hisEqData[item])
              {
                hisEqData[item].Magnitude=hisEqData[item].Magnitude.substring(0,4);
              }
            }
            this.pagedata = this.setThdData(data);
            this.mapInit()
          }
        }, {setting, data});
      }.bind(this))    
    },
    setThdData (data) {
      let nearCityData = data.nearCityData;
      let near = null;
      let hisEqData = null;
      if(nearCityData)
      {
        near = nearCityData.map((item) => {
          let obj = null;
          if (Number(item.distence) === 0) {
            item.distence = '震中';
          } else {
            item.distence = '距离震中' + item.distence + '公里';
          }
          obj = Object.assign({}, item);
          return obj;
        });
      }
      if(data.hisEqData) hisEqData = this.arrayFrom(data.hisEqData);
      return {
            near: near,
            his: hisEqData
          };
    },
    arrayFrom (obj) {
      let hisiconarr = this.hisiconarr;
      let rs = [];
      for (let key in obj) {
        if(obj.hasOwnProperty(key)) {
          if (obj[key]) {
            rs.push(obj[key]);
          }
        }
      }
      rs.forEach((item, index) => {
        item.icon = hisiconarr[index];
        item.Magnitude = Number(item.Magnitude).toFixed(2);
      })
      return rs;
    },
    mapInit(){
      this.encgmap= new Googlemap(this.mapId,this.eqCenter,this.mapData,"HYBRID")
      this.encgmap.setMarker(this.eqCenter,"EqCenter")
      this.encgmap.setMarker(this.mapData.nearCityData,"nearCity",false)
      this.encgmap.setHisMarker(this.mapData.hisEqData);
      this.encgmap.panToCenter();
    },
    cloneObj(obj){
      var newObj = {};  
      if (obj instanceof Array) {  
          newObj = [];  
      }  
      for (var key in obj) {  
          var val = obj[key];  
          //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。  
          newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;  
      }  
      return newObj;  
    }
  },
  components: {
    mHead,
    mapComponent
  }
}
</script>

<style>
.thd-map {
    height: 21rem;
    background-color: transparent;
    padding: 0.3rem 0.2rem;
    position: relative;
}
.thd-near {
    margin-top: 0.5rem;
    background-color: transparent;
}
.thd-near div {
    background-color: transparent;
}
.thd-near-group {
    display: block;
}
.thd-near-item p {
    margin: 0;
}
.thd-near-item {
    display: inline-block;
    width: 45%;
    background-color: #fff !important;
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.thd-near-item:after {
    content: '';
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 0 1px 0 #b9b3b3;
    width: 100%;
    height: 100%;
}
.thd-near-item:first-child {
    margin-right: 3%;
    margin-bottom: 1rem;
}
.thd-near-item:nth-child(3) {
    margin-right: 3%;
}
.thd-near-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 0.2rem;
    padding-left: 0.3rem;
    padding-right: 0.1rem;
    margin-bottom: 1rem;
    position: relative;
    font-size: 12px;
    color: #444242;
    font-weight: 700;
}
.thd-near-title:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    clear: both;
    border-left: 2px solid #ec0707;
    height: 100%;
}
.thd-near-name {
    color: #000;
}
.thd-near-content {
    font-size: 12px;
    text-align: center;
    font-weight: 700;
    display: flex;
}
.thd-near-control {
    width: calc(100% / 3);
}
p.thd-near-label {
    margin-bottom: 0.3rem;
    color: #736f6f;
    font-size: 10px;
}
p.thd-near-int {
    color: #e80e0e;
}
.thd-his {
    background-color: transparent;
    width: 95%;
}
.thd-his div {
    background-color: transparent;
}
.thd-his p {
    margin: 0;
}
.thd-his-title {
    text-align: left;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
}
.thd-his-title h3 {
    display: inline-block;
    padding: 0.2rem 0.3rem;
    background-color: #bdb5b5;
    border-radius: 5px;
    color: #f5eeee;
}
.thd-his-item {
    display: flex;
    text-align: center;
    margin-bottom: 0.5rem;
}
.thd-his-date {
    font-size: 15px;
    font-weight: 700;
    margin-right: 1rem;
    width: 5.1rem;
}
.thd-his-content {
    display: flex;
    flex-direction: column;
}
.thd-his-addr {
    display: flex;
}
.thd-his-icon {
    width: 1rem;
    margin-right: 0.5rem;
}
.thd-his-name {
    font-size: 15px;
    font-weight: 700;
}
.thd-his-detail {
    display: flex;
    font-weight: 500;
    position: relative;
    font-size: 12px;
    padding-left: 1rem;
    padding-top: 0.8rem;
    margin-left: 0.5rem;
}
.thd-his-detail:before {
    content: '';
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    border-left: 1px solid #000;
    height: 100%;
}
.thd-his-control {
    margin-right: 0.5rem;
}
p.thd-his-label {
    margin-bottom: 0.3rem;
    color: #5f5c5c;
    font-size: 10px;
}
p.thd-his-int {
    font-size: 15px;
}
.thd-map h4{
  margin: 0;
  text-align: center;
}

</style>